<!-- @/components/WinnerCenter.vue -->
<template>
    <div class="winner-center">
      <h2>荣誉中心</h2>
      <!-- 搜索框 -->
      <input type="text" v-model="searchQuery" placeholder="搜索球员...">
      <!-- 排序下拉菜单 -->
      <select v-model="sortKey" @change="sortAwards">
        <option value="employeeName">姓名</option>
        <option value="count">获奖次数</option>
        <option value="date">日期</option>
      </select>
      <!-- 获奖信息表格 -->
      <table>
        <thead>
          <tr>
            <th>人员名称</th>
            <th>奖项名称</th>
            <th>获奖日期</th>
            <th>获奖次数</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="award in sortedFilteredAwards" :key="award.id">
            <td>{{ award.employeeName }}</td>
            <td>{{ award.awardTitle }}</td>
            <td>{{ award.date }}</td>
            <td>{{ award.count }}</td>
          </tr>
        </tbody>
      </table>
      <!-- ECharts 图表容器 -->
      <div ref="awardChart" style="width: 600px;height:400px;"></div>
    </div>
  </template>
  
  <script>
  import * as echarts from 'echarts';
  
  export default {
    name: 'WinnerCenter',
    data() {
      return {
        searchQuery: '',
        sortKey: 'employeeName',
        awards: [
          // 静态数据示例
          { id: 1, employeeName: '张三', awardTitle: 'MVP', date: '2024-01-10', count: 1 },
          { id: 2, employeeName: '李四', awardTitle: '得分王', date: '2024-02-15', count: 3 },
          { id: 3, employeeName: '王五', awardTitle: '杰出贡献', date: '2024-03-20', count: 5 },
          { id: 4, employeeName: '赵六', awardTitle: '优秀团队', date: '2024-04-25', count: 6 },
          { id: 5, employeeName: '孙七', awardTitle: '最佳新人', date: '2024-05-30', count: 2 },
          // 更多数据...
        ],
        chartInstance: null,
      };
    },
    computed: {
      filteredAwards() {
        return this.awards.filter(award =>
          award.employeeName.toLowerCase().includes(this.searchQuery.toLowerCase())
        );
      },
      sortedFilteredAwards() {
        return this.filteredAwards.sort((a, b) => {
          const keyA = a[this.sortKey];
          const keyB = b[this.sortKey];
          if (keyA < keyB) return -1;
          if (keyA > keyB) return 1;
          return 0;
        });
      },
    },
    methods: {
      initChart() {
        this.chartInstance = echarts.init(this.$refs.awardChart);
        const option = {
          title: { text: '球员获奖情况' },
          tooltip: {},
          xAxis: {
            type: 'category',
            data: this.sortedFilteredAwards.map(award => award.employeeName),
          },
          yAxis: {
            type: 'value'
          },
          series: [{
            data: this.sortedFilteredAwards.map(award => award.count),
            type: 'bar',
            name: '获奖次数'
          }],
        };
        this.chartInstance.setOption(option);
      },
      sortAwards() {
        // 触发计算属性重新排序
      },
    },
    watch: {
      sortedFilteredAwards(newAwards) {
        this.updateChart(newAwards);
      },
    },
    mounted() {
      this.initChart();
    },
  };
  </script>
  
  <style scoped>
  .winner-center ul {
    list-style-type: none;
    padding: 0;
  }
  .winner-center li {
    margin-bottom: 10px;
  }
  table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 20px;
  }
  table, th, td {
    border: 1px solid #ddd;
  }
  th, td {
    padding: 8px;
    text-align: left;
  }
  th {
    background-color: #f2f2f2;
  }
  tr:nth-child(even) {
    background-color: #f9f9f9;
  }
  tr:hover {
    background-color: #f1f1f1;
  }
  </style>